<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <th
    *ngIf="showHeader"
    scope="row"
    class="title"
    [attr.rowspan]="conflict.texts.member.text.length">
    {{ t(entities.get(conflict.name)!) }}
  </th>
  <td
    *ngIf="
      isRestricted(memberText) && conflict.texts.member.restrictions?.length;
      else member
    ">
    <button
      class="restrictions-btn"
      [attr.aria-expanded]="open"
      [attr.aria-controls]="id"
      data-test="member-restrictions-btn"
      type="button"
      (click)="toggleDropdown()">
      <span
        class="text highlight"
        [innerHtml]="t(memberText)"
        data-test="member-conflict"></span>
      <tui-svg
        class="chevron"
        [src]="open ? 'chevron-up' : 'chevron-down'">
      </tui-svg>
    </button>

    <ul
      *ngIf="open"
      [attr.id]="id"
      class="restriction-list">
      <li
        data-test="restriction-element"
        class="restriction-element"
        *ngFor="
          let restriction of conflict.texts.member.restrictions;
          trackBy: trackByIndex
        ">
        {{ t(restriction) }}
      </li>
    </ul>
  </td>
  <ng-template #member>
    <td
      scope="row"
      class="text"
      [innerHtml]="t(memberText)"
      data-test="member-conflict"></td>
  </ng-template>

  <td
    *ngIf="
      isRestricted(publicText) && conflict.texts.public.restrictions?.length;
      else public
    ">
    <button
      class="restrictions-btn"
      [attr.aria-expanded]="open"
      [attr.aria-controls]="id"
      data-test="public-restrictions-btn"
      type="button"
      (click)="toggleDropdown()">
      <span
        class="text highlight"
        [innerHtml]="t(publicText)"
        data-test="public-conflict"></span>
      <tui-svg
        class="chevron"
        [src]="open ? 'chevron-up' : 'chevron-down'">
      </tui-svg>
    </button>

    <ul
      *ngIf="open"
      [attr.id]="id"
      class="restriction-list">
      <li
        *ngFor="
          let restriction of conflict.texts.public.restrictions;
          trackBy: trackByIndex
        "
        class="restriction-element"
        data-test="restriction-element">
        {{ t(restriction) }}
      </li>
    </ul>
  </td>
  <ng-template #public>
    <td
      class="text"
      [innerHtml]="t(publicText)"
      data-test="public-conflict"></td>
  </ng-template>
</ng-container>
